<template>
    <page-view>
        <el-card>
            <template #header>
                <div class="flex flex-row justify-between items-center">
                    <div class="font-bold">编辑菜品分类</div>
                    <el-link type="primary" @click="$router.back()">返回列表</el-link>
                </div>
            </template>
            <el-skeleton :rows="4" animated :loading="isLoading">
                <el-form :model="FormData" label-width="120px" ref="foodCategoryEl" :rules="foodCategoryRules">
                    <el-form-item label="ID编号" prop="id">
                        <el-input :disabled="true" v-model="FormData.id"></el-input>
                    </el-form-item>
                    <el-form-item label="菜品分类" prop="category_name">
                        <el-input placeholder="请输入菜品分类" v-model="FormData.category_name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :loading="isSubmiting" :loading-icon="Loading" @click="submitForm">
                            保存数据
                        </el-button>
                        <el-button type="danger" @click="resetForm">重置表单</el-button>
                    </el-form-item>
                </el-form>
            </el-skeleton>
        </el-card>
    </page-view>
</template>

<script setup>
import {  Loading } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import API from "../../utils/API";
import { ElNotification } from "element-plus"
import { useRouter, useRoute } from "vue-router"

const router = useRouter();
// 路由单体对象
const route = useRoute();

const FormData = ref({
    id: "",
    category_name: "",
})

// 菜品验证规则
const foodCategoryRules = {
    category_name: [{ required: "true", message: "请输入菜品分类", trigger: "blur" }]
}

// 根据id获取表单数据
const isLoading = ref(false);
const findById = () => {
    isLoading.value = true;
    // 得到单体路由传过来的id参数
    let id = route.params.id;
    // console.log(id);
    API.categoryInfo.findById(id)
        .then(result => {
            // console.log(result);
            FormData.value = result
        }).finally(() => {
            isLoading.value = false;
        })
}
findById();

// 表单验证
const foodCategoryEl = ref(null);
const submitForm = () => {
    foodCategoryEl.value.validate(valid => {
        if (valid) {
            updateCategoryInfo();
        }
        else {
            ElNotification({
                type: "warning",
                title: "警告",
                message: "验证不通过，请重试"
            })
        }
    })
}


// 更新菜品分类函数
const isSubmiting = ref(false);
const updateCategoryInfo = () => {
    isSubmiting.value = true;
    API.categoryInfo.update(FormData.value)
        .then(result => {
            ElNotification({
                type: "success",
                title: "修改成功",
                message: "菜品分类修改成功"
            })
            router.replace({ name: 'CategoryInfoList' })
        }).catch(error => {
            ElNotification({
                type: "warning",
                title: "修改失败",
                message: "菜品分类修改失败"
            })
        }).finally(() => {
            isSubmiting.value = false;
        })
}

// 重置表单
const resetForm = () => {
    foodCategoryEl.value.resetFields();
}
</script>

<style scoped lang="scss">

</style>